<template>
    <main class="m-2">
        <h2 v-if="!props.embedded">订单历史记录</h2>
        <div>
            期号：
            <el-select v-model="activeDrawNum" placeholder="请选择" size="small" style="width: 240px"
                @change="onChangeDrawNum">
                <el-option v-for="(item, idx) in dataset" :key="idx"
                    :label="`${item.lotteryDrawNum} - [${item.lotteryDrawResult}] ${historyList.includes(item.lotteryDrawNum) ? '[详情]' : ''}`"
                    :value="item.lotteryDrawNum" />
            </el-select>
            <el-button size="small" type="info" class="ml-2" @click="onShowNextIssueInfo()">下期信息</el-button>
        </div>
        <div class="mt-2 flex flex-wrap">
            <!-- 开奖信息 -->
            <section>
                <h4 class="m-0 text-sm">开奖信息</h4>
                <table>
                    <tbody>
                        <tr>
                            <td class="font-500 pe-1">期号</td>
                            <td>{{ drawalInfo.lotteryDrawNum }}</td>
                        </tr>
                        <tr>
                            <td class="font-500 pe-1">开奖时间</td>
                            <td>{{ drawalInfo.lotteryDrawTime }}</td>
                        </tr>
                        <tr>
                            <td class="font-500 pe-1">开奖结果</td>
                            <td>{{ drawalInfo.lotteryDrawResult }}</td>
                        </tr>
                        <tr>
                            <td class="font-500 pe-1">和值</td>
                            <td>{{ arraySum(drawalInfo.lotteryDrawResult) }}</td>
                        </tr>
                        <tr>
                            <td class="font-500 pe-1">点评</td>
                            <td>{{ drawalInfo.comment }}</td>
                        </tr>
                    </tbody>
                </table>
            </section>
            <div class="color-danger" v-show="!isHistory">查无历史数据。</div>
            <div v-show="isHistory">
                <!-- 订单号码 -->
                <section class="mb-2">
                    <h4 class="m-0 text-sm">订单号码</h4>
                    <div v-if="false" class="my-2 lh-5 text-gray-400">
                        共 20 个号码，开奖 2 个号码<br />
                        中奖 0 注，奖金 0 元
                    </div>
                    <div class="mt-2 grid grid-cols-2 gap-2 w-60">
                        <div class="font-500">号码</div>
                        <div class="font-500">中奖</div>
                        <template v-for="(item, idx) in orderList" :key="idx">
                            <div v-html="item.text"></div>
                            <div :class="item.money > 0 ? 'color-red-400 font-bold' : ''">
                                {{ item.statusText }}
                                <span v-if="item.money > 0">（{{ item.moneyText }}）</span>
                            </div>
                        </template>
                    </div>
                </section>
                <!-- DeepSeek AI 选号 -->
                <section class="mb-2">
                    <h4 class="m-0 text-sm">DeepSeek AI 选号</h4>
                    <div class="mt-2 grid grid-cols-2 gap-2 w-60">
                        <div class="font-500">号码</div>
                        <div class="font-500">中奖</div>
                        <template v-for="(item, idx) in aiList.DeepSeek" :key="idx">
                            <div v-html="item.text"></div>
                            <div :class="item.money > 0 ? 'color-red-400 font-bold' : ''">
                                {{ item.statusText }}
                                <span v-if="item.money > 0">（{{ item.moneyText }}）</span>
                            </div>
                        </template>
                    </div>
                </section>
                <!-- 纳米搜索 AI 选号 -->
                <section class="mb-2">
                    <h4 class="m-0 text-sm">纳米搜索 AI 选号</h4>
                    <div class="mt-2 grid grid-cols-2 gap-2 w-60">
                        <div class="font-500">号码</div>
                        <div class="font-500">中奖</div>
                        <template v-for="(item, idx) in aiList.Nami" :key="idx">
                            <div v-html="item.text"></div>
                            <div :class="item.money > 0 ? 'color-red-400 font-bold' : ''">
                                {{ item.statusText }}
                                <span v-if="item.money > 0">（{{ item.moneyText }}）</span>
                            </div>
                        </template>
                    </div>
                </section>
                <!-- 机选号码 -->
                <section class="mb-2">
                    <h4 class="m-0 text-sm">机选号码</h4>
                    <div class="mt-2 grid grid-cols-2 gap-2 w-60">
                        <div class="font-500">号码</div>
                        <div class="font-500">中奖</div>
                        <template v-for="(item, idx) in autoList" :key="idx">
                            <div v-html="item.text"></div>
                            <div :class="item.money > 0 ? 'color-red-400 font-bold' : ''">
                                {{ item.statusText }}
                                <span v-if="item.money > 0">（{{ item.moneyText }}）</span>
                            </div>
                        </template>
                    </div>
                </section>
                <!-- 优选号码 -->
                <section class="mb-2">
                    <h4 class="m-0 text-sm">优选号码</h4>
                    <div class="mt-2 grid grid-cols-2 gap-2 w-60">
                        <div class="font-500">号码</div>
                        <div class="font-500">中奖</div>
                        <template v-for="(item, idx) in betterAutoList" :key="idx">
                            <div v-html="item.text"></div>
                            <div :class="item.money > 0 ? 'color-red-400 font-bold' : ''">
                                {{ item.statusText }}
                                <span v-if="item.money > 0">（{{ item.moneyText }}）</span>
                            </div>
                        </template>
                    </div>
                </section>
                <!-- 筛选 -->
                <section>
                    <h4 class="m-0 text-sm">筛选</h4>
                    <table>
                        <tbody>
                            <tr>
                                <td class="font-500 pe-1">和值走势线趋势：</td>
                                <td>{{ filterInfo?.trend }}</td>
                            </tr>
                            <tr>
                                <td class="font-500 pe-1">和值范围：</td>
                                <td>{{ filterInfo?.sumRange }}</td>
                            </tr>
                            <tr>
                                <td class="font-500 pe-1">前区范围：</td>
                                <td>{{ filterInfo?.frontRange }}</td>
                            </tr>
                            <tr>
                                <td class="font-500 pe-1">后区范围：</td>
                                <td>{{ filterInfo?.backRange }}</td>
                            </tr>
                            <tr>
                                <td class="font-500 pe-1">前区包含号码：</td>
                                <td>{{ filterInfo?.frontIncludes }}</td>
                            </tr>
                            <tr>
                                <td class="font-500 pe-1">前区排除号码：</td>
                                <td>{{ filterInfo?.frontExcludes }}</td>
                            </tr>
                            <tr>
                                <td class="font-500 pe-1">后区包含号码：</td>
                                <td>{{ filterInfo?.backIncludes }}</td>
                            </tr>
                            <tr>
                                <td class="font-500 pe-1">后区排除号码：</td>
                                <td>{{ filterInfo?.backExcludes }}</td>
                            </tr>
                        </tbody>
                    </table>
                </section>
            </div>
        </div>
    </main>
</template>

<script setup>
import { ref } from 'vue';
import DltOrderModel from '@/model/DltOrderModel';
import DltDataModel from '@/model/DltDataModel';
import { arraySum } from '@/utils/Utils';
import { ElMessage } from 'element-plus';
import DltApi from '@/apis/DltApi';

let dltDataModel = new DltDataModel();
let dltOrderModel = new DltOrderModel();
const dataset = dltDataModel.getDataSource();
const activeDrawNum = ref('');
const orderList = ref([]);
const aiList = ref({ DeepSeek: [], Nami: [] });
const autoList = ref([]);
const betterAutoList = ref([]);
const filterInfo = ref({});
const drawalInfo = ref({});
const historyList = ref([]);
const isHistory = ref(false);

const props = defineProps({
    embedded: {
        type: Boolean,
        default: false
    }
});

const onShowNextIssueInfo = () => {
    onChangeDrawNum(parseInt(dataset[0].lotteryDrawNum) + 1, true);
}

const onChangeDrawNum = (lotteryDrawNum, isNext = false) => {
    if (isNext) {
        drawalInfo.value = {
            lotteryDrawNum,
            lotteryDrawResult: '',
            lotteryDrawDate: '',
        }
        isHistory.value = true;
    } else {
        drawalInfo.value = dataset.find(item => item.lotteryDrawNum === activeDrawNum.value);
        drawalInfo.value.sum = arraySum(drawalInfo.value.lotteryDrawResult.split(' '));
        isHistory.value = historyList.value.includes(lotteryDrawNum);
    }
    DltApi.read(lotteryDrawNum).then(res => {
        console.log('read', res);
        if (res.code != 200) {
            ElMessage.error(res.message);
            return;
        }
        drawalInfo.value = res.data.DrawalInfo;
        orderList.value = dltOrderModel.calcOrder(drawalInfo.value.lotteryDrawResult, res.data.OrderList);
        aiList.value.DeepSeek = dltOrderModel.calcOrder(drawalInfo.value.lotteryDrawResult, res.data.AiList.DeepSeek);
        aiList.value.Nami = dltOrderModel.calcOrder(drawalInfo.value.lotteryDrawResult, res.data.AiList.Nami);
        autoList.value = dltOrderModel.calcOrder(drawalInfo.value.lotteryDrawResult, res.data.AutoList);
        betterAutoList.value = dltOrderModel.calcOrder(drawalInfo.value.lotteryDrawResult, res.data.BetterAutoList);
        filterInfo.value = res.data.FilterInfo;
    })
}

const loadData = () => {
    DltApi.index().then(res => {
        console.log('index', res)
        historyList.value = res.data;
    })
}
loadData();
</script>